<template>
  <div class="user-container">
    <div class="header">
      <div class="avatar-img mt-20">
        <img v-if="currentUserAvatar" :src="currentUserAvatar" alt="">
        <img v-else src="https://img0.baidu.com/it/u=3057614720,234108904&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501" alt="">
      </div>

      <div class="username mt-10">{{ username }}</div>
      <n-flex v-if="username" style="color: #2196f3;" class="mt-10 fz-14">
        <p style="color: #f35221;">Lv.{{ Math.floor(level / 1000) }}</p>

        <p style="color:#333369;"> <span>· 客栈龄</span> <span class="fz-14">{{ Math.floor(daysSinceRegistration(day))
            }}</span> <span>天</span></p>

        <p> · {{ designation }}</p>
      </n-flex>
      <div v-if="username" class="mt-10 progress" style="width:60%;">
        <n-progress type="line" :percentage="Number(countLevel)" :show-indicator="false" processing />
      </div>
      <div class="edit mt-20 fz-12" @click="show = !show">编辑个人资料</div>

      <div class="form m-30" v-if="show">
        <n-flex justify="space-between">
          <n-button v-if="!username" @click="handleClick" type="tertiary">
            登录/注册
          </n-button>
          <n-button v-if="username" @click="handlerTheme" type="primary">
            更换主题
          </n-button>
          <n-button v-if="username" @click="handerAvatar" type="tertiary">
            更换头像
          </n-button>
          <n-button v-if="username" @click="handleClick2" type="error">
            退出登录
          </n-button>
        </n-flex>
      </div>
    </div>

    <n-drawer v-model:show="active" width="100%" height="60%" :placement="placement">
      <n-drawer-content title="选一张吧，不满意联系我">
        <n-flex>
          <n-space>
            <n-avatar lazy @click="handlerUpdateAvatar(item.src)" v-for="item in userAvatarList" :key="item.key"
              :size="100" :src="item.src" />
          </n-space>
        </n-flex>
      </n-drawer-content>
    </n-drawer>

  </div>
</template>

<script setup lang="ts">
import { usrSetState, updateUserAvatar } from '@/apis/index'
import bus from '@/utils/mitt';
import { daysSinceRegistration } from '@/utils/index';
import { close } from '@/utils/socket'
import type { DrawerPlacement } from 'naive-ui'
import { useMain } from '@/store/index';
import { useDark, useToggle } from '@vueuse/core'

const isDark = useDark()
const toggleDark = useToggle(isDark);
const currentUserAvatar = localStorage.getItem('avatar') as string;
const level = Number(localStorage.getItem('l') as string);
const username = localStorage.getItem('u') as string;
const designation = localStorage.getItem('designation') as string;
const countLevel = localStorage.getItem('countLevel') as string;
const day = localStorage.getItem('day') as string;
const store = useMain();
const message = useMessage();
const router = useRouter();
const active = ref(false)
const show = ref(false);
const placement = ref<DrawerPlacement>('top')
const userAvatarList = ref([
  {
    key: '1',
    src: 'https://q8.itc.cn/q_70/images03/20240421/e0a5f758921840449f1561e206243211.jpeg'
  },
  {
    key: '2',
    src: 'https://img0.baidu.com/it/u=3803974646,3732137585&fm=253&fmt=auto&app=138&f=JPEG?w=813&h=800'
  },
  {
    key: '3',
    src: 'https://img2.baidu.com/it/u=3856486326,1144495435&fm=253&fmt=auto&app=138&f=JPEG?w=809&h=800'
  },
  {
    key: '4',
    src: 'https://img1.baidu.com/it/u=170867573,1329286942&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
  },
  {
    key: '5',
    src: 'https://img1.baidu.com/it/u=4178214645,3415324152&fm=253&fmt=auto&app=138&f=JPEG?w=513&h=500'
  },

  {
    key: '6',
    src: 'https://img2.baidu.com/it/u=3442351950,4092002402&fm=253&fmt=auto&app=138&f=JPEG?w=380&h=380'
  },
  {
    key: '7',
    src: 'https://q7.itc.cn/q_70/images03/20240126/33c6461a4e5f412ea914fa223d3f8715.jpeg'
  },
  {
    key: '8',
    src: 'https://img0.baidu.com/it/u=3948847912,1276245001&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200'
  },
  {
    key: '9',
    src: 'https://img1.baidu.com/it/u=2091557952,895997085&fm=253&fmt=auto&app=138&f=JPEG?w=505&h=500'
  },
  {
    key: '10',
    src: 'https://img1.baidu.com/it/u=3231689325,1092997899&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=541'
  },
  {
    key: '11',
    src: 'https://img1.baidu.com/it/u=3318331343,3272031804&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=900'
  }, 
  {
    key: '12',
    src: 'https://pic.rmb.bdstatic.com/bjh/7fcf2162402ba8a010f39ff0ba3640975322.jpeg@h_1280'
  }, 
  { 
    key: '12',
    src: 'https://img2.baidu.com/it/u=2661685335,485796501&fm=253&fmt=auto&app=138&f=JPEG?w=475&h=475'
  },
  { 
    key: '12',
    src: 'https://img2.baidu.com/it/u=2258491261,4154126958&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'
  },
])
const handleClick = () => {
  store.setIsShwoMenu(false);
  router.push({
    path: '/registerAndLogin'
  })
}




const handleClick2 = async () => {
  await usrSetState({ username: localStorage.getItem('u') as string, state: '0' })
  close();
  store.deleteToken();
  localStorage.removeItem('u');
  localStorage.removeItem('t');
  localStorage.removeItem('designation');
  localStorage.removeItem('l');
  localStorage.removeItem('day');
  localStorage.removeItem('countLevel');
  localStorage.removeItem('avatar');
  bus.emit('userCount', 0)
  router.push({
    path: '/'
  })
}

const updateTemp = ref(false);
const handerAvatar = () => {
  active.value = true;

}

function handlerTheme() {
  toggleDark();
}

function handlerUpdateAvatar(url: string) {
  if (updateTemp.value) return;
  updateUserAvatar({ avatar: url }).then(res => {
    if (res.status === 200) {
      message.success(res.message);
      localStorage.setItem('avatar', url);
      updateTemp.value = true;
      active.value = false;
      setTimeout(() => {
        updateTemp.value = false;
        location.reload();
      }, 1000)
    }
  })

}

function init() {
  if (!localStorage.getItem('u')) {
    show.value = true;
  }

}
init();
</script>


<style lang="scss" scoped>
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 260px;
  padding: 20px;
  position: relative;

  .avatar-img {
    border-radius: 50%;
    width: 110px;
    height: 110px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .username {
    font-size: 18px;
    font-weight: bold;
    color: #000;
  }

  .avatar-img:hover {
    transform: rotate(666turn);
    transition-delay: 1s;
    transition-property: all;
    transition-duration: 59s;
    transition-timing-function: cubic-bezier(.34, 0, .84, 1);
  }

  .edit {
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 10px;
    cursor: pointer;
    background-color: #f3f0f0;
  }

}
</style>